<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>添加图书页面</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
  <link rel="../../../layui/css/modules/laydate/default/laydate.css">
  <link rel="stylesheet" href="../../../layui/css/modules/layer/default/layer.css">
  <script src="../../../layui/modules/laydate.js"></script> <!-- 要在layui 的前边不然时间插件失效 -->
  <script src="../../../layui/layui.js"></script>
  <style>
      body {
          padding: 20px;
      }

      .demo-input {
          padding-left: 10px;
          height: 38px;
          min-width: 262px;
          line-height: 38px;
          border: 1px solid #e6e6e6;
          background-color: #fff;
          border-radius: 2px;
      }

      .demo-footer {
          padding: 50px 0;
          color: #999;
          font-size: 14px;
      }

      .demo-footer a {
          padding: 0 5px;
          color: #01AAED;
      }
  </style>
</head>
<body>
<form class="layui-form" id="addBook" lay-filter="example">
  <div class="layui-form-item">

    <div class="layui-inline">
      <label class="layui-form-label">书名：</label>
      <div class="layui-input-inline">
        <input type="hidden" name="bookId" value="${bookInfo.bookId}">
        <input type="text" name="name" lay-verify="required" value="${bookInfo.name}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">作者：</label>
      <div class="layui-input-inline">
        <input type="text" name="author" lay-verify="required" value="${bookInfo.author}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">价格：</label>
      <div class="layui-input-inline">
        <input type="text" name="price" lay-verify="required" value="${bookInfo.price}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <%-- 		<fmt:formatDate value="${test}" pattern="yyyy-MM-dd"/>  --%>
    <div class="layui-inline">
      <label class="layui-form-label">出版日期：</label>
      <div class="layui-input-inline">
        <input type="text" name="pubDate" lay-verify="required" value="${bookInfo.pubDate}" autocomplete="off"
               class="layui-input" id="test1">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">出版社：</label>
      <div class="layui-input-inline">
        <input type="text" name="publish" lay-verify="required" value="${bookInfo.publish}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">ISBN：</label>
      <div class="layui-input-inline">
        <input type="text" name="ISBN" lay-verify="required" value="${bookInfo.ISBN}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">库存：</label>
      <div class="layui-input-inline">
        <input type="text" name="stock" lay-verify="required" value="${bookInfo.stock}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <!-- 两个变量都来自后台,下拉框回显需要用到 -->
      <c:set var="bcid" value="${bookInfo.cid}"/>
      <label class="layui-form-label">书本类别：</label>
      <div class="layui-input-block">
        <select name="cid" id="class_id" lay-verify="required">
          <option value="">请选择书本类别</option>
          <c:forEach items="${category}" var="ctg">
            <option value="${ctg.cid}" <c:if test="${ctg.cid==bcid}">selected</c:if>>${ctg.cname}</option>
          </c:forEach>
        </select>
      </div>
    </div>
  </div>

  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">语言：</label>
      <div class="layui-input-block">
        <select name="language" id="language" lay-verify="required">
          <option value="">请选择书本语言</option>
          <option value="中文" <c:if test="${bookInfo.language=='中文'}">selected</c:if>>中文</option>
          <option value="英语" <c:if test="${bookInfo.language=='英语'}">selected</c:if>>英语</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">书本描述：</label>
    <div class="layui-input-block">
      <textarea style="width:600px; height:150px" placeholder="请输入书本描述" name="introduction" lay-verify="required"
                class="layui-textarea">${bookInfo.introduction}</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <c:if test="${bookInfo==null}"><!-- 查看是没有添加按钮的 -->
      <button class="layui-btn" lay-submit="" lay-filter="addBook">立即添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </c:if>
      <!-- 修改需要修改按钮是没有添加按钮的 -->
      <c:if test="${code==1}">
        <button class="layui-btn" lay-submit="" lay-filter="updateBook">立即修改</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </c:if>
    </div>
  </div>
</form>


<script type="text/javascript">
	layui.use(['form', 'layer', 'jquery', 'laydate'], function () {
		let form = layui.form;
		let layer = layui.layer;
		let $ = layui.jquery;
		let laydate = layui.laydate;

		laydate.render({
			elem: '#test1' //指定元素
		});

		// 添加图书
		form.on('submit(addBook)', function (data) {
			// 先进行输入的基本验证
			if (!new RegExp('^[0-9]*$').test(data.field.stock)) {
				layer.msg("库存必须是数字类型！");
				return false;
			}
			$.ajax({
				url: '${pageContext.request.contextPath}/book/addBook',
				data: data.field,
				type: 'POST',
				dataType: 'json',
				success: function (res) {
					if (res.success) {
						layer.msg(res.message);
						layer.alert(res.message, function () {
							window.parent.location.reload();
							parent.layer.close(index)
						})
					} else {
						layer.msg(res.message);
					}
				}
			})
			return false;
		})


		// 更新图书信息
		form.on('submit(updateBook)', function (data) {
			// 先进行输入的基本验证
			if (!new RegExp('^[0-9]*$').test(data.field.stock)) {
				layer.msg("库存必须是数字类型！");
				return false;
			}
			$.ajax({
				url: '${pageContext.request.contextPath}/book/editBook',
				data: data.field,
				dataType: 'json',
				method: 'POST',
				success: function (res) {
					if (res.success) {
						layer.alert(res.message, function () {
							window.parent.location.reload();
							parent.layer.close(index)
						})
					} else {
						layer.msg(res.message);
					}
				},
				error: function (res) {
					layer.msg("系统异常，抱歉，请重试！")
				}
			})
			return false;
		})

	})
</script>


</body>
</html>
